/*
  props：
    modalTitle: 弹窗标题
    okBtn: 确认按钮
    cancelBtn: 取消按钮
    注意事项：传参时候使用烤串的书写方式xx-xxx
  slot:
    modal-content: 内容区域
    modal-footer： 页脚按钮区域
  methods:
    okHandle: 触发确认on-ok自定义事件
    cancelHandle： 触发取消on-cancel自定义事件
 */
Vue.component('zz-modal-component', {
    props: {
        modalTitle: {
            type: String,
            default: '提示框'
        },
        modalStyle:{
            type: String,
            default:''
        },

        okBtn: {
            type: String,
            default: '确认'
        },
        cancelBtn: {
            type: String,
            default: '取消'
        }
    },
    template: `
        <div v-drag class="zz-modal" v-bind:style="modalStyle">
          <div class="zz-modal-header">
            <span>{{ modalTitle }}</span>
          </div>
          <div v-drag class="zz-modal-content">
            <div>
              <slot name="modal-content">内容区域</slot>
            </div>
          </div>
          <div class="zz-modal-footer">
              <input class="zz-btn zz-okbtn" type="button" v-model="okBtn" @click="okHandle" />
              <input class="zz-btn zz-cancelbtn" type="button" v-model="cancelBtn" @click="cancelHandle" />
          </div>
        </div>
      `,
    methods: {
        okHandle () {
            console.log("点击确定");
            this.$emit("on-ok");
        },
        cancelHandle () {
            console.log("点击取消");
            this.$emit("on-cancel");
        }
    },

    directives:{
        drag(el,bindings){
            el.onmousedown=function(ev){
                var disX=ev.clientX-el.offsetLeft;
                var disY=ev.clientY-el.offsetTop;

                document.onmousemove=function(ev){
                    var l=ev.clientX-disX;
                    var t=ev.clientY-disY;
                    el.style.left=l+'px';
                    el.style.top=t+'px';
                };

                document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null;
                };
            };
        }
    }
});
